<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="学校" prop="schoolName">
                                <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getSchoolIdFu'></school>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="时间范围" prop="timeRange"> 
                               <el-select v-model="query.timeRange" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="dataList">
                <el-row :gutter="20">
                    <el-col :span="6" class="data-item">
                        <div class="item" v-loading='dataLoading'>
                            <div class="title title-extend">开通学校数</div>
                            <div class="data data-extend">{{statistics.openSchoolsNum}}</div> 
                        </div>
                    </el-col>
                    <el-col :span="6" class="data-item">
                        <div class="item" v-loading='dataLoading'>
                            <div class="title title-extend">购买总人数</div>
                            <div class="data data-extend">{{statistics.totalBuy}}</div>  
                        </div>
                    </el-col> 
                    <el-col :span="6" class="data-item">
                        <div class="item" v-loading='dataLoading'>
                            <div class="title title-extend">观看总次数</div>
                            <div class="data data-extend">{{statistics.totalViews}}</div> 
                        </div>
                    </el-col>
                    <el-col :span="6" class="data-item">
                        <div class="item" v-loading='dataLoading'>
                            <div class="title title-extend">观看总时长</div>
                            <div class="data data-extend data-long">{{statistics.totalViewTime}}</div> 
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div slot="eCharts1" >
                <div class="charts-title">e直播统计对比图</div>
                <div class="charts-display" v-loading='chartLoading'>
                    <trendChart width='100%' height='100%' id="trendChart" :option='trendChartOption'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import school from 'components/SchoolClasss/school';
    import { countLiveInfo, countLiveService } from 'api/manageAnalysis';
    export default{
        name: 'liveService',
        components: {province, city, region, echartsLayout, trendChart, school},
        data() {
            return {
                dataLoading: false,
                chartLoading: false,
                formState: false,
                dataListState: false,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: true,
                timeList: [{
                    value: '3',
                    label: '近3个月'
                }, {
                    value: '6',
                    label: '近6个月'
                }, {
                    value: '12',
                    label: '近12个月'
                }],
                statistics: {
                    openSchoolsNum: 0,
                    totalBuy: 0,
                    totalViews: 0,
                    totalViewTime: '0天0时0分0秒'
                },
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolName: '',
                    schoolId: '',
                    timeRange: '3'
                },
                trendChartOption: null
            }
        },
        created() {
            this.queryData();
        },
        methods: {
            // 0秒 》 0天0时0分0秒 （暂未用）
            formatDuring(second) {
                var days = parseInt(second / (60 * 60 * 24));
                var hours = parseInt((second % (60 * 60 * 24)) / (60 * 60));
                var minutes = parseInt((second % (60 * 60)) / (60));
                var seconds = second % 60;
                return days + ' 天 ' + hours + ' 时 ' + minutes + ' 分 ' + seconds + ' 秒 ';
            },
            getSchoolIdFu(schoolId) {
                this.query.schoolId = schoolId;
            },
            onSubmit() {
                this.queryData();
            },
            queryData() {
                this.getLiveInfo();
                this.getTrendChart();
            },
            getLiveInfo() {

                let provinceId = this.query.provinceId;  // "省id",
                let cityId = this.query.cityId;   // "市id",
                let areaId = this.query.areaId;  // "区id",
                let schoolId = this.query.schoolId; // "学校id",
                let timeRange = this.query.timeRange; // "时间范围"（3三个月，6六个月，12十二个月）,
                this.dataLoading = true;
                countLiveInfo(provinceId, cityId, areaId, schoolId, timeRange).then(res => {
                    this.dataLoading = false;
                    this.statistics.openSchoolsNum = res.data.content.num;
                    this.statistics.totalBuy = res.data.content.peopleNum;
                    this.statistics.totalViews = res.data.content.commit;
                    this.statistics.totalViewTime = res.data.content.date; // '0天0时0分0秒';
                
                }).catch(() => {
                    this.dataLoading = false;
                });
            },
            getTrendChart() {
                let provinceId = this.query.provinceId;  // "省id",
                let cityId = this.query.cityId;   // "市id",
                let areaId = this.query.areaId;  // "区id",
                let schoolId = this.query.schoolId; // "学校id",
                let timeRange = this.query.timeRange; // "时间范围"（3三个月，6六个月，12十二个月）,
                this.chartLoading = true;
                countLiveService(provinceId, cityId, areaId, schoolId, timeRange).then(res => {
                    this.chartLoading = false;
                    
                    let xAxisDataList = [];
                    let schoolTotalList = []; // 开通学校数
                    let buyTotalList = []; // 购买总人数
                    let seeTotalList = []; // 观看次数
                    let dataList = res.data.content;

                    if (dataList.length) {
                        dataList.forEach(item => {
                            xAxisDataList.push(item.date);
                            schoolTotalList.push(item.num);
                            buyTotalList.push(item.peopleNum);
                            seeTotalList.push(item.commit);
                        });
                    }
                    this.trendChartOption = {
                        color: ['#FBD8BB', '#AAC5D5', '#AFB2D9', '#6FBDD2'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['开通学校数', '购买总人数', '观看次数'] 
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisDataList
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '开通学校数',
                                type: 'line',
                                smooth: true,
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: schoolTotalList 
                            },
                            {
                                name: '购买总人数',
                                type: 'line',
                                smooth: true,
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: buyTotalList 
                            },
                            {
                                name: '观看次数',
                                type: 'line',
                                smooth: true,
                                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                data: seeTotalList 
                            }
                        ]
                    };        
                }).catch(() => {
                    this.chartLoading = false;
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     